import { createRouter, createWebHistory } from 'vue-router'
//NProgress 配置 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {onMounted} from "vue";
NProgress.configure({ showSpinner: false })

const routes = [
  {
    path: '/',
    name: '主页',
    component: () => import('../layout/index.vue'),
    redirect:'/index',
    children:[
      {
        path: '/index',
        name: '首页',
        component: () => import('../views/index/index.vue')
      },
      {
        path: '/userCenter',
        name: '个人中心',
        component: () => import('../views/userCenter/index')
      },
      // {
      //   path: '/sys/user',
      //   name: '用户管理',
      //   component: () => import('../views/sys/user/index.vue')
      // },
      // {
      //   path: '/sys/role',
      //   name: '角色管理',
      //   component: () => import('../views/sys/role/index.vue')
      // },
      // {
      //   path: '/sys/menu',
      //   name: '菜单管理',
      //   component: () => import('../views/sys/menu/index.vue')
      // },
      // {
      //   path: '/bsns/department',
      //   name: '部门管理',
      //   component: () => import('../views/bsns/Department')
      // },
      // {
      //   path: '/bsns/post',
      //   name: '岗位管理',
      //   component: () => import('../views/bsns/Post')
      // },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 动态生成路由配置
function generateRoutes(menuData) {
  return menuData.map(menuItem => ({
    path: menuItem.path, // 路由路径
    name: menuItem.name, // 路由名称
    // component: () => import(`@/views/${menuItem.component}.vue`), // 动态导入组件
    // 如果menuItem有children属性，则递归处理
    children: menuItem.children ? menuItem.children.map(child => ({
      path: child.path,
      name: child.name,
      component: () => import(`@/views/${child.component}.vue`)
    })): []
  }));
}
//后端获取的菜单列表
const userMenuData =JSON.parse(sessionStorage.getItem("menuList"))
if (userMenuData) {
  const dynamicRoutes = generateRoutes(userMenuData);
  dynamicRoutes.forEach(route => router.addRoute('主页', route));
}

let login = false;  //标识只加载动态路由一次
//导航守卫
router.beforeEach( (to,from,next) => {
  // 在路由改变之前显示进度条
  NProgress.start();
  console.log(to.path,from.path,next);
  // 如果用户访问登录页，直接放行
  if(to.path === "/login") {
    return next();
  }
  const token = window.sessionStorage.getItem('token');
  const userMenuData =JSON.parse(sessionStorage.getItem("menuList"))
  if(token) {
     next()
     if (userMenuData && login === false) {
      const dynamicRoutes = generateRoutes(userMenuData);
      dynamicRoutes.forEach(route => router.addRoute('主页', route));
      login = true
      console.log(login,1111)
    }
  } else {
    return next('/login') // 如果没有token则跳转到登录页
  }
  //判断是否有标题，动态设置标题
   if(to.name){
        document.title = to.name;
    }else {
       next()  //执行进入路由，如果不写就不会进入目标页
   }

});

// 在路由改变之后隐藏进度条
router.afterEach(() => {
  NProgress.done()
})

export default router
